<template>
  <CardBox type="honor" @clickButton="clickCardBoxButton">
    <CardList
      v-model:delLoading="delLoading"
      :data="data"
      @clickButton="clickCardListButton"
    />
  </CardBox>

  <!-- 弹窗 -->

  <FormModalAddHonor
    ref="modalRef"
    :isAdd="isAdd"
    @complete="getData"
    :data="updateData"
  ></FormModalAddHonor>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import { defineAsyncComponent, getCurrentInstance, inject, nextTick, ref, watch } from "vue";
import {
  ExperienceUrl,
  postExperienceDelete,
  postExperienceList,
} from "../../../../../api/profile";
import type { ExperienceListItem } from "../../../../../types/profile";
const CardBox = defineAsyncComponent(() => import("./common/CardBox.vue"));
const CardList = defineAsyncComponent(() => import("./common/CardList.vue"));

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t

// 获取工作经验数据
const lang = inject("lang");
const _data = ref<any>({
  en: undefined,
  cn: undefined,
});
const data = ref<any[] | undefined>();
const getData = async () => {
  let res_en = await postExperienceList(ExperienceUrl.honorList, {
    lang: "en",
  });
  let res_cn = await postExperienceList(ExperienceUrl.honorList, {
    lang: "cn",
  });
  _data.value.cn = res_cn.data;
  _data.value.en = res_en.data;
  showData();
};
getData();

const showData = () => {
  data.value = _data.value[lang.value].map((item) => {
    let titles = [];
    if (item.title) {
      titles.push(item.title);
    }
    return {
      start_time: item.start_year + "." + item.start_month,
      end_time: item.end_year! + "." + item.end_month!,
      titles,
      descri: item.job_description,
      _rawData: item,
    };
  });
};

watch(lang, () => {
  showData();
});

const modalRef = ref();
const isAdd = ref(true);

// 点击新增按钮
const clickCardBoxButton = () => {
  if (isMobile()) {
    goto("/mobile/updateHonor");
    sessionStorage.setItem("m_lang", lang.value);
    return;
  }
  isAdd.value = true;
  nextTick(() => {
    modalRef.value.show();
  });
};

// 点击修改或删除按钮
const delLoading = ref(false);
const clickCardListButton = async ({ type, index }) => {
  if (type == "update") {
    showEditDialog(data.value![index]._rawData);
  }
  if (type == "delete") {
    // 删除操作
    delLoading.value = true;
    let id = data.value![index]._rawData.id;
    let res = await postExperienceDelete(ExperienceUrl.honorDelete, {
      id,
      lang: lang.value,
    });
    if (res.code === 200) {
      message.success($t('message.success.delete'));
      getData();
    } else {
      message.error($t('message.error.delete'));
    }
    delLoading.value = false;
  }
};

const updateData = ref();
const showEditDialog = (item: ExperienceListItem) => {
  updateData.value = JSON.parse(JSON.stringify(item));
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(updateData.value));
    goto("/mobile/updateHonor");
    sessionStorage.setItem("m_lang", lang.value);
    return;
  }
  isAdd.value = false;
  nextTick(() => {
    modalRef.value.show();
  });
};
</script>
<style scoped lang="less"></style>
